<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>{$praiseContent['title']}</title>

<css href="/Public/css/maint_eat.css?v=4" />
<css href="/Public/css/font.css" />
<link rel="stylesheet" href="/Public/css/gyBase.css">
<link href="/Public/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<script  src="/Public/js/jquery-1.7.1.min.js" ></script>
<script src="/Public/js/bootstrap/bootstrap.min.js"></script>

<script src="/Public/js/banner.js" type="text/javascript"></script>

<script  src="/Public/js/jquery.masonry.min.js" ></script>

<script  src="/Public/js/commoneat.js" ></script>
<script  src="/Public/js/loading.js" ></script>

<script>
	var g_endTimeStamp = "{$praiseContent['enddate']}";
</script>
<link rel="stylesheet" href="/Public/css/praise_modify.css">
<script src="/Public/js/praise_modify.js" ></script>

<script type="text/javascript">
$(function() {
	var container = $('#ulWaterfall');
	var loading = $('#imloading');
	var searching = 0;
	loading.data("on", true);
	var load = function( sqlJson, top, left ) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
			    var votes = Number(sqlJson.datas[i].share);
				html +="<li class='item'><a href='/?m=wap&c=praise&a=fetch_one&praise={$praise}&id="+sqlJson.datas[i].id+"'>"+"<img class='pic' src='"+sqlJson.datas[i].pic+"' data-href='"+sqlJson.datas[i].pic+"'></a>";//}
				html +="<div class='divNum'></div>";
				html +="<span class='spanNum'>"+"编号："+ sqlJson.datas[i].grade + "号</span>";
				html +="<div class='liintro'>"+sqlJson.datas[i].show_name+"</div>";
				html += "<p style='float: right;padding-right: 15px;color:#ff5e45'>" + sqlJson.datas[i].votes + "</p><div class='lihot'></div></li>";
			}
			var time = setTimeout(function() {
				var style = { opacity: 1 };
				if( top && left ){
				}
				var newElems = $(html).css( {opacity: 0} ).appendTo(container);

				newElems.find( "img.pic" ).each( function(){
				} );
				newElems.imagesLoaded(function() {
					newElems.animate( style, 10 );
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	var search = function( options ){
		searching = 1;
		$.ajax({
			url: "/?m=wap&c=praiseItem&a=search",
			data: options,
			type: "POST",
			success: function( result ){
				$( "#waterfull" ).html( "<ul id='ulWaterfall' class='masonry' style='position:relative'></ul>" );
				container = $('#ulWaterfall');
				common.waterfall();
				$(window).trigger( "scrollTop" );
				load( result, 1, 1 );
			},
			error: function(){
			}
		});
	};

	$(".searchBtn").unbind( "click").bind( "click", function(){
            var str = $( "#searchKeyword" ).val();
            if( !$.trim( str ) ) return;
		    search( {praise: "{$praise}", keyword: str} );
	});

	$(".searchDel").unbind( "click").bind( "click", function(){
		$("#searchKeyword").val("");
	});

	common.show.fetchJson( { praise: "{$praise}"}, load );

	$(window).scroll(function() {
		if (!loading.data("on")) return;
		var itemNum = $('#waterfull').find('.item').length;
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop() && !searching ) {
			loading.data("on", false).fadeIn();
			setTimeout( function(){
				common.show.fetchJson( { priase: "{$praise}" }, load );
			}, 800 );
		}
	});
});

</script>
<style type="text/css">
	.item img {
		padding-top: 30px;
	}
	input{
		background:none;
		border:none;
	}
</style>
</head>	
<body style="background-color:#eee;">
<include file="Tpl/header" />
<div id="wrapper">
<div id="main">
	<div class="activeTitles">
		<ul class="ulactTitle"> <!-- TODO: not good, cause html rendering uneffective, should use real tab -->
			<?php
				if(empty($info)){
					echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
				}else{
					$link = json_decode($info, true);
					if(empty($link['desc'])){
						echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
					}else{
						echo '<li class="on" ><span>人气榜</span></li><li><a href="';
						echo '/Wap/praise/index?type=info&praise=' . $praise;
						echo '"><span class="bor0">活动说明</span></a></li>';
					}
				}
			?>
        </ul>
    </div>
	<div class="alert alert-warning" style="display: none">
		<a href="#" class="close" onclick="remove_alert();">
			&times;
		</a>
		<strong>您已提交美食，待审核</strong>
	</div>
    <div class="searchBox">
        <div class="search">
            <!--<span class="icon iconfont icon-sousuo"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索" id="searchBtn"/> -->

				<input class="txt"  placeholder="输入名称进行搜索" id="searchKeyword"/>

			<span class="icon iconfont searchDel"></span>
        </div> <input type="button" class="searchBtn" value="">
	</div>
	<p class="pintro"></p>
		<div class="content">
			<div class="waterFallBox" id="waterfull">
				<ul id="ulWaterfall">
				</ul>
			</div>
			<div id="imloading" class="loading">加载中</div>
		</div>
</div>
</div>
<include file="Tpl/load" />
<include file="Tpl/footer" praise="{$praise}"/>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
		timestamp: "{$timestamp}", // 必填，生成签名的时间戳
		nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
		signature: '{$wxSha1}',// 必填，签名，见附录1
		jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline', 'chooseImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.error(function(res){
		console.log(res);
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});
	wx.ready( function( e ){
		wx.onMenuShareAppMessage({
			title: "{$share_title}",
			desc: "{$share_desc}",
			link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praise&a=index&praise={$praise}",
			imgUrl: "{$share_pic}",
			type: 'link',
			dataUrl: '',
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
		wx.onMenuShareTimeline({
			title: "{$share_title}",
			link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praise&a=index&praise={$praise}",
			imgUrl: "{$share_pic}",
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
	});
</script>
<script src="/Public/js/jquery.lazyload.js"></script>
</body>

</html>